<template>
	
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="定位组件" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
				<tm-sheet :shadow="24">
					<view class="px-24 d-inline-block">
						<tm-position :position="{ top: true }" :offset="[0, -10]">
							<template v-slot:default>
								文字内容
							</template>
							<template v-slot:position>
								<view class="blue text-size-xs" style="width: max-content;">左上</view>
							</template>
						</tm-position>
					</view>
					<view class="px-24 d-inline-block">
						<tm-position :position="{ top: true, right: true }" :offset="[0, -10]">
							<template v-slot:default>
								文字内容
							</template>
							<template v-slot:position>
								<view class="blue text-size-xs" style="width: max-content;">左右</view>
							</template>
						</tm-position>
					</view>
					<view class="px-24 d-inline-block">
						<tm-position :position="{ bottom: true, left: true }" :offset="[0, 10]">
							<template v-slot:default>
								文字内容
							</template>
							<template v-slot:position>
								<view class="blue text-size-xs" style="width: max-content;">底左</view>
							</template>
						</tm-position>
					</view>
					<view class="px-24 d-inline-block">
						<tm-position :position="{ bottom: true, right: true }" :offset="[0, 10]">
							<template v-slot:default>
								文字内容
							</template>
							<template v-slot:position>
								<view class="blue text-size-xs" style="width: max-content;">底右</view>
							</template>
						</tm-position>
					</view>
				</tm-sheet>
				<tm-sheet :shadow="24">
					
					<view class="px-24 d-inline-block">
						<tm-position :offset="[0, -10]">
							<template v-slot:default>
								<view><tm-avatar></tm-avatar></view>
							</template>
							<template v-slot:position>
								<view class="blue text-size-xs text-align-center round-10" style="width: 50%;">定位</view>
							</template>
						</tm-position>
						
						<view class="py-15">
							<tm-position :position="{ right: true,  }"  :offset="[-5, -35]">
								<template v-slot:default>
									<view>
										<tm-images :width="200" src="https://picsum.photos/200"></tm-images>
									</view>
								</template>
								<template v-slot:position>
									<view class="text-align-right">
										<view class="green text-size-xs text-align-center round-10 py-10" style="width: 70upx;line-height: 30upx;" >
											<tm-icons :size="24" color="white" name="icon-heart-fill"></tm-icons>
										</view>
									</view>
								</template>
							</tm-position>
							
						</view>
					</view>
				</tm-sheet>
					
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmPosition from "@/tm-vuetify/components/tm-position/tm-position.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmAvatar from "@/tm-vuetify/components/tm-avatar/tm-avatar.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmPosition,tmIcons,tmImages,tmAvatar},
	data() {
		return {};
	}
};
</script>

<style lang="less"></style>
